<template>
  <!-- Begin page -->
  <div id="wrapper">
    <!-- Top Bar Start -->
    <topbar :page_title="page_title" :userInfo="this.userInfo" v-if="this.userInfo!=''"></topbar>
    <!-- Top Bar End -->

    <!-- ========== Left Sidebar Start ========== -->
    <leftsidebar :userInfo="this.userInfo" v-if="this.userInfo!=''" ></leftsidebar>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
      <!-- Start content -->
      <div class="content">
        <div class="container">
            <div  style="" v-if="check_url()==''">
                <img src="../../static/assets/images/涛云语录1.png" style="float:left;height:180px;opacity:0.7">
                <img src="../../static/assets/images/涛云logo.jpg" style=";width:350px;border-radius:50%;margin-top:10%" align="center">
                <img src="../../static/assets/images/涛云语录2.png" style="float:right;width:180px;margin-top:5%;opacity:0.7">
            </div>
          <component :is="componentId" :userInfo="this.userInfo" v-if="this.userInfo!=''" :groupIds="this.groupIds" ></component>
        </div>
      </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->

    <footer class="footer text-right">2020 - 2999 © taoyun.</footer>
  </div>
  <!-- END wrapper -->
</template>


<script>
import Groups from "@/components/Content/Groups";
import User from "@/components/Content/User";
import Public from "@/components/Content/Public";
import Trash from "@/components/Content/Trash";
// import axios from "axios";
export default {
  data() {
    return {
      page_title: "", // 页面标题
      componentId: "Public", // 动态默认组件
      transport_data: "", // 子组件接收对象
      token: "", // 子组件接收对象

        // 用户基本属性
        user_number:'',
        name:'',
        permission:'',
        state:'',
        
        userInfo: "", // 子组件接收的用户信息，用于显示
        groupIds: "", // 子组件接收的群组列表信息

        select_group:"",

      path_rule: {
        groups: "Groups",
        user: "User",
        public: "Public",
        trash: "Trash"
      },
      a: 1,
    };
  },
  created() {
      // 因为所有的非法或者合法链接都链接到index页面中
      // 所以在index组件中需要进行非法判断之类的，用代码实现
    // 先判断是否已经登录，否则跳转到登录页

    this.getUser();
  },
  beforeMount() {
      // 返回该用户所在的群组列表
    this.getGroupList("134");
  },
  components: {
    Groups,
    User,
    Public,
    Trash
  },
  watch: {
    $route() {
    //   console.log(this.$route.params.pathMatch); // 监听路由变化
      var path_ = this.$route.params.pathMatch; // 获取到了通配符匹配到的路径 /share
      var choices_ = this.path_rule[path_];
      if (choices_ == null) {
        return; // 无效路径无需操作
      } else {
        this.componentId = choices_;
        this.page_title = choices_;
      }
    }
  },
  methods: {
    open_error(mes) {
      this.$notify.error({
        title: "错误",
        message: mes,
        position: "bottom-right",
        duration:3000
      });
    },
    check_url(){
        return this.$route.params.pathMatch;
    },

    // 根据token获取用户的基本信息
    getUser(){
         // 从浏览器缓存拿token到vuex  防止刷新浏览器就丢失token
         this.$store.commit("set_token", window.localStorage.getItem("tokenLogin")); 
        this.$axios.get('/api/taoyun/v1/getUser')
        .then((res) => {
            if(res.data.code=="200"){
                this.userInfo=res.data.data;
                this.getGroupList(res.data.data.userId);
            }
            else if(res.data.code=="500"){
                this.jump_to_login();
            }
        })
        .catch((err) => {
            this.jump_to_login();
        });
    },

    // 获取用户所在的群组列表
    getGroupList(userId){
        this.$axios.get('/api/taoyun/v1/Group/ShowUserBelongGroup', {
           params: {
               userId,
           }
        })
        .then((res) => {
            if(res.data.data!="该用户没有加入群组"){
                this.groupIds=res.data.data;
            }
        })
        .catch((err) => {
           console.log(err);
        });
    },

    // 检测到token失效，跳转到登录页
    jump_to_login(){
        this.open_error("认证已经过期，已自动跳转到登录页面");
        this.$router.push({path:"/signin"});
    },
  },
  mounted() {
    var path_ = this.$route.params.pathMatch;
    if (path_ == "") {
      path_ = "all";
    }
    var choices_ = this.path_rule[path_];
    if (choices_ == null) {
      choices_ = "all";
      this.componentId = this.path_rule["all"];
    } else {
      this.page_title = choices_;
      this.componentId = choices_;
    }
  }
};
</script>
